<template>
  <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        label="url">
        <p>{{url}}</p>
      </el-table-column>
    </el-table>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
import axios from 'axios'; //npm i axios -S

function loadData(state){
  axios
      .get('/address')
      .then((res) => {
          console.info(res.data);
          state.tableData= res.data});
};

  export default {
    setup(){
    
      const url = import.meta.env.VITE_APP_URL;
      const state = reactive({tableData:[]});

      onMounted(()=>{loadData(state)});

      return{
          url,
        ...toRefs(state),
      }

    }

  }
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>